<template>
    <view>
        <!-- 按钮 -->
        <button
                :class="['buttonBorder',!_rotate?'dlbutton':'dlbutton_loading']"
                :style="{'background':bgColor, 'color': fontColor}"

                @click="$emit('click', $event)"
                @contact="$emit('contact', $event)"
                @error="$emit('error', $event)"
                @getphonenumber="$emit('getphonenumber', $event)"
                @getuserinfo="$emit('getuserinfo', $event)"
                @launchapp="$emit('launchapp', $event)"
                @longtap="$emit('longtap', $event)"
                @opensetting="$emit('opensetting', $event)"
                @touchcancel="$emit('touchcancel', $event)"
                @touchend="$emit('touchend', $event)"
                @touchmove="$emit('touchmove', $event)"
                @touchstart="$emit('touchstart', $event)"
        >
            <view :class="_rotate?'rotate_loop':''">
                <text v-if="_rotate" class="cuIcon cuIcon-loading1 "></text>
                <view v-if="!_rotate">
                    <slot name="text">{{ text }}</slot>
                </view>
            </view>
        </button>
    </view>
</template>

<script>
    export default {
        props: {
            text: String, //显示文本
            rotate: {
                //是否启动加载
                type: [Boolean, String],
                default: false,
            },
            bgColor: {
                //按钮背景颜色
                type: String,
                default: "linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6))",
            },
            fontColor: {
                //按钮字体颜色
                type: String,
                default: "#FFFFFF",
            },
        },
        computed: {
            _rotate() {
                //处理值
                return String(this.rotate) !== 'false'
            },
        }
    }
</script>

<style>
    @import url("./css/icon.css");

    button {
        outline: none; /* 或者 outline: 0 */
    }

    button:after {
        border: none;
    }

    button:focus {
        outline: none; /* 或者 outline: 0 */
    }

    .dlbutton {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;
        font-size: 30rpx;
        white-space: nowrap;
        overflow: hidden;
        width: 601rpx;
        height: 100rpx;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
        box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.4);
        border-radius: 2.5rpx;
        margin-top: 0rpx;
    }

    .dlbutton_loading {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;
        font-size: 30rpx;
        width: 100rpx;
        height: 100rpx;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
        box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.4);
        border-radius: 2.5rpx;
        margin-top: 0rpx;
    }

    .buttonBorder {
        border: none;
        border-radius: 2.5rem;
        -webkit-box-shadow: 0 0 60rpx 0 rgba(0, 0, 0, .2);
        box-shadow: 0 0 60rpx 0 rgba(0, 0, 0, .2);
        -webkit-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
        -moz-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
        -ms-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
        -o-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
        transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
    }

    /* 旋转动画 */
    .rotate_loop {
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation: rotate 1s linear infinite;
        -moz-animation: rotate 1s linear infinite;
        -o-animation: rotate 1s linear infinite;
        animation: rotate 1s linear infinite;
    }

    @-webkit-keyframes rotate {
        from {
            -webkit-transform: rotate(0deg)
        }
        to {
            -webkit-transform: rotate(360deg)
        }
    }

    @-moz-keyframes rotate {
        from {
            -moz-transform: rotate(0deg)
        }
        to {
            -moz-transform: rotate(359deg)
        }
    }

    @-o-keyframes rotate {
        from {
            -o-transform: rotate(0deg)
        }
        to {
            -o-transform: rotate(359deg)
        }
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg)
        }
        to {
            transform: rotate(359deg)
        }
    }
</style>
